<!DOCTYPE html>
<html lang="zh-CN" data-theme="light">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>照片分类器</title>
    <!-- 引入Google字体 -->
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap" rel="stylesheet">
    <!-- 引入Bootstrap 5 CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入Font Awesome图标库 -->
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
    <!-- 引入Swiper CSS -->
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
    <!-- 引入Animate.css -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
    <style>
        /* CSS变量定义 - 支持暗黑模式 */
        :root {
            --background-color: #667eea;
            --background-end-color: #764ba2;
            --text-color: #fff;
            --sidebar-background: rgba(255, 255, 255, 0.1);
            --sidebar-backdrop-filter: blur(10px);
            --sidebar-box-shadow: 2px 0 10px rgba(0, 0, 0, 0.1);
            --container-background: rgba(255, 255, 255, 0.1);
            --container-border-radius: 20px;
            --container-backdrop-filter: blur(10px);
            --container-box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            --upload-box-border: rgba(255, 255, 255, 0.3);
            --upload-box-bg: rgba(255, 255, 255, 0.05);
            --upload-box-hover-border: rgba(255, 255, 255, 0.6);
            --upload-box-hover-bg: rgba(255, 255, 255, 0.1);
            --btn-primary-background: rgba(255, 255, 255, 0.1);
            --btn-danger-background: rgba(255, 99, 71, 0.8);
            --btn-danger-hover-background: rgba(255, 99, 71, 1);
            --swiper-slide-bg: rgba(255, 255, 255, 0.1);
            --confidence-bar-bg: #ffcccb;
            --class-link-bg: rgba(255, 255, 255, 0.1);
            --class-link-hover-bg: rgba(255, 255, 255, 0.2);
            --tooltip-bg: rgba(0, 0, 0, 0.7);
            --confidence-bar-container-bg: rgba(255, 255, 255, 0.1);
            --secondary-text-color: rgba(255, 255, 255, 0.8);
        }

        [data-theme="dark"] {
            --background-color: #121212;
            --background-end-color: #1e1e1e;
            --sidebar-background: rgba(0, 0, 0, 0.1);
            --container-background: rgba(0, 0, 0, 0.1);
            --upload-box-border: rgba(0, 0, 0, 0.3);
            --upload-box-bg: rgba(0, 0, 0, 0.05);
            --upload-box-hover-border: rgba(0, 0, 0, 0.6);
            --upload-box-hover-bg: rgba(0, 0, 0, 0.1);
            --btn-primary-background: rgba(0, 0, 0, 0.1);
            --swiper-slide-bg: rgba(0, 0, 0, 0.1);
            --class-link-bg: rgba(0, 0, 0, 0.1);
            --class-link-hover-bg: rgba(0, 0, 0, 0.2);
            --confidence-bar-container-bg: rgba(0, 0, 0, 0.1);
            --secondary-text-color: rgba(255, 255, 255, 0.6);
        }

        /* 全局样式 */
        body {
            font-family: 'Poppins', sans-serif;
            background: linear-gradient(135deg, var(--background-color), var(--background-end-color));
            color: var(--text-color);
            min-height: 100vh;
            margin: 0;
            padding: 0;
            display: flex;
            transition: background 0.5s ease;
        }

        /* 左侧菜单样式 */
        .sidebar {
            width: 250px;
            background: var(--sidebar-background);
            backdrop-filter: var(--sidebar-backdrop-filter);
            padding: 20px;
            box-shadow: var(--sidebar-box-shadow);
            transition: width 0.3s ease, transform 0.3s ease;
            will-change: width, transform;
        }

        .sidebar.collapsed {
            width: 60px;
        }

        .sidebar h3 {
            font-size: 1.5rem;
            font-weight: 600;
            margin-bottom: 20px;
            color: var(--text-color);
            text-align: center;
            transition: opacity 0.3s ease;
            will-change: opacity;
        }

        .sidebar.collapsed h3 {
            opacity: 0;
        }

        .sidebar ul {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar ul li {
            margin-bottom: 10px;
        }

        .sidebar ul li a {
            display: block;
            padding: 10px;
            background: var(--class-link-bg);
            border-radius: 10px;
            color: var(--text-color);
            text-decoration: none;
            transition: background 0.3s ease, transform 0.3s ease;
            opacity: 0;
            transform: translateY(-20px);
            animation: fadeInUp 0.5s forwards;
            will-change: background, transform, opacity;
        }

        .sidebar ul li a:hover {
            background: var(--class-link-hover-bg);
            transform: translateY(-3px);
        }

        .sidebar.collapsed ul li a span {
            display: none;
        }

        /* 折叠按钮样式 */
        .collapse-btn {
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            background: var(--btn-primary-background);
            border: none;
            border-radius: 50%;
            padding: 10px;
            color: var(--text-color);
            cursor: pointer;
            transition: background 0.3s ease, transform 0.3s ease;
            will-change: background, transform;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .collapse-btn:hover {
            background: var(--class-link-hover-bg);
        }

        .collapse-btn i {
            transition: transform 0.3s ease;
            will-change: transform;
        }

        /* 右侧内容样式 */
        .content {
            flex: 1;
            padding: 40px;
            transition: margin-left 0.3s ease;
            will-change: margin-left;
        }

        .content.shifted {
            margin-left: 60px;
        }

        .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 40px;
            background: var(--container-background);
            border-radius: var(--container-border-radius);
            backdrop-filter: var(--container-backdrop-filter);
            box-shadow: var(--container-box-shadow);
        }

        h1 {
            font-size: 2.5rem;
            font-weight: 600;
            margin-bottom: 30px;
            text-align: center;
            color: var(--text-color);
        }

        /* 上传区域样式 */
        .upload-box {
            border: 2px dashed var(--upload-box-border);
            padding: 40px;
            text-align: center;
            border-radius: 15px;
            background: var(--upload-box-bg);
            transition: all 0.3s ease;
            animation: fadeInUp 0.5s ease-out;
            animation-fill-mode: both;
            will-change: border-color, background;
        }

        .upload-box:hover {
            border-color: var(--upload-box-hover-border);
            background: var(--upload-box-hover-bg);
        }

        .upload-box p {
            font-size: 1.1rem;
            color: var(--secondary-text-color);
            margin-top: 15px;
        }

        #fileInput {
            display: none;
        }

        /* 自定义文件上传按钮 - 带鼠标跟随流光效果 */
        .custom-file-upload {
            display: inline-block;
            padding: 10px 20px;
            background: var(--btn-primary-background);
            border-radius: 25px;
            color: var(--text-color);
            cursor: pointer;
            transition: all 0.3s ease;
            will-change: transform, box-shadow;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        /* 所有按钮的鼠标跟随流光效果 */
        .btn-glow {
            position: absolute;
            width: 100px;
            height: 100px;
            background: radial-gradient(circle, rgba(255,255,255,0.8) 0%, rgba(255,255,255,0) 70%);
            border-radius: 50%;
            transform: translate(-50%, -50%) scale(0);
            opacity: 0;
            pointer-events: none;
            z-index: -1;
            transition: transform 0.3s, opacity 0.3s;
            will-change: transform, opacity;
        }

        [data-theme="dark"] .btn-glow {
            background: radial-gradient(circle, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 70%);
        }

        /* 按钮悬停时光圈效果 */
        .btn-primary:hover .btn-glow,
        .btn-danger:hover .btn-glow,
        .custom-file-upload:hover .btn-glow {
            opacity: 0.6;
            transform: translate(-50%, -50%) scale(1);
        }

        /* 按钮基础样式 */
        .btn-primary {
            background: var(--btn-primary-background);
            border: none;
            border-radius: 25px;
            padding: 10px 20px;
            color: var(--text-color);
            transition: all 0.3s ease;
            margin-top: 40px;
            will-change: transform, box-shadow;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-weight: 500;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .btn-primary:hover {
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

        .btn-danger {
            background: var(--btn-danger-background);
            border: none;
            border-radius: 25px;
            padding: 10px 20px;
            color: var(--text-color);
            transition: all 0.3s ease;
            margin-top: 20px;
            will-change: transform, box-shadow;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            font-weight: 500;
            position: relative;
            overflow: hidden;
            z-index: 1;
        }

        .btn-danger:hover {
            background: var(--btn-danger-hover-background);
            transform: translateY(-3px);
            box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);
        }

        #loading {
            display: none;
            text-align: center;
            margin-top: 20px;
        }

        #loading img {
            width: 100px;
            height: 100px;
        }

        #results {
            margin-top: 30px;
            display: none;
        }

        /* Swiper 容器样式 */
        .swiper-container {
            width: 100%;
            height: 400px;
            margin-top: 20px;
        }

        /* Swiper 幻灯片样式 */
        .swiper-slide {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background: var(--swiper-slide-bg);
            border-radius: 15px;
            padding: 20px;
            text-align: center;
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            will-change: transform, box-shadow;
            position: relative;
        }

        .swiper-slide:hover {
            transform: translateY(-10px) scale(1.02);
            box-shadow: 0 16px 32px rgba(0, 0, 0, 0.2);
        }

        .swiper-slide img {
            max-width: 100%;
            max-height: 300px;
            border-radius: 10px;
            margin-bottom: 15px;
            transition: transform 0.3s ease;
            will-change: transform;
            object-fit: cover;
        }

        .swiper-slide img:hover {
            transform: scale(1.05);
        }

        .swiper-slide p {
            margin: 5px 0;
            font-size: 1rem;
            color: var(--secondary-text-color);
        }

        /* 动画效果 */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(-20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes growBar {
            from {
                width: 0;
            }
            to {
                width: var(--bar-width);
            }
        }

        @keyframes highlight {
            0% { background-color: var(--class-link-bg); }
            50% { background-color: rgba(0, 255, 0, 0.3); }
            100% { background-color: var(--class-link-bg); }
        }

        /* 置信度文本颜色 */
        .confidence-text {
            color: var(--text-color);
        }

        /* 类别超链接样式 */
        .class-link {
            display: inline-flex;
            align-items: center;
            background: var(--class-link-bg);
            padding: 5px 10px;
            border-radius: 10px;
            color: var(--text-color);
            text-decoration: none;
            transition: background 0.3s ease, transform 0.3s ease;
            margin-top: 10px;
            will-change: background, transform;
            animation: highlight 1s ease-in-out forwards;
        }

        .class-link:hover {
            background: var(--class-link-hover-bg);
            transform: translateY(-2px);
        }

        .class-link i {
            margin-right: 5px;
        }

        /* Tooltip 样式 */
        .tooltip {
            visibility: hidden;
            background-color: var(--tooltip-bg);
            color: var(--text-color);
            text-align: center;
            border-radius: 5px;
            padding: 5px 10px;
            position: absolute;
            z-index: 1;
            top: 10px;
            right: 10px;
            opacity: 0;
            transition: opacity 0.3s;
            will-change: opacity;
        }

        .swiper-slide:hover .tooltip {
            visibility: visible;
            opacity: 1;
        }

        /* 置信度光柱样式 */
        .confidence-bar-container {
            width: 100%;
            height: 20px;
            background: var(--confidence-bar-container-bg);
            border-radius: 10px;
            overflow: hidden;
            margin-top: 10px;
        }

        .confidence-bar {
            height: 100%;
            background: var(--confidence-bar-bg);
            width: 0;
            transition: width 0.5s ease;
            animation: growBar 0.5s forwards;
        }

        /* 响应式设计 */
        @media (max-width: 992px) {
            .sidebar {
                width: 100%;
                padding: 15px;
            }

            .sidebar.collapsed {
                width: 100%;
            }

            .sidebar.collapsed h3 {
                display: block;
            }

            .sidebar.collapsed ul li a span {
                display: inline;
            }

            .content {
                padding: 20px;
            }

            .container {
                padding: 20px;
            }

            .upload-box {
                padding: 30px;
            }

            .swiper-container {
                height: 300px;
            }

            .swiper-slide {
                padding: 15px;
            }

            .swiper-slide img {
                max-height: 200px;
            }

            .btn-primary,
            .btn-danger {
                margin-top: 20px;
            }
        }

        /* 主题切换按钮样式 */
        .theme-toggle {
            position: fixed;
            top: 20px;
            right: 20px;
            z-index: 1000;
            background: var(--btn-primary-background);
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: background 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }

        .theme-toggle:hover {
            background: var(--class-link-hover-bg);
        }

        .theme-toggle i {
            color: var(--text-color);
            font-size: 1.2rem;
        }
    </style>
</head>
<body>
    <!-- 主题切换按钮 -->
    <button class="theme-toggle" id="themeToggleBtn">
        <i class="fas fa-adjust"></i>
    </button>

    <!-- 左侧菜单 -->
    <div class="sidebar" id="sidebar">
        <h3>分类类别</h3>
        <ul>
            <li><a href="/history?category=飞机"><i class="fas fa-plane"></i> <span>飞机</span></a></li>
            <li><a href="/history?category=汽车"><i class="fas fa-car"></i> <span>汽车</span></a></li>
            <li><a href="/history?category=鸟"><i class="fas fa-dove"></i> <span>鸟</span></a></li>
            <li><a href="/history?category=猫"><i class="fas fa-cat"></i> <span>猫</span></a></li>
            <li><a href="/history?category=鹿"><i class="fas fa-deer"></i> <span>鹿</span></a></li>
            <li><a href="/history?category=狗"><i class="fas fa-dog"></i> <span>狗</span></a></li>
            <li><a href="/history?category=青蛙"><i class="fas fa-frog"></i> <span>青蛙</span></a></li>
            <li><a href="/history?category=马"><i class="fas fa-horse"></i> <span>马</span></a></li>
            <li><a href="/history?category=船"><i class="fas fa-ship"></i> <span>船</span></a></li>
            <li><a href="/history?category=卡车"><i class="fas fa-truck"></i> <span>卡车</span></a></li>
        </ul>
        <button class="collapse-btn" id="collapseBtn">
            <i class="fas fa-angle-double-left"></i>
        </button>
    </div>

    <!-- 右侧内容 -->
    <div class="content" id="content">
        <div class="container animate__animated animate__fadeIn">
            <h1>照片分类器</h1>

            <!-- 上传区域 -->
            <div class="upload-box">
                <label for="fileInput" class="custom-file-upload">
                    <i class="fas fa-upload"></i> 选择图片
                </label>
                <input type="file" id="fileInput" accept="image/*" multiple>
                <p>支持多文件上传</p>
                <div class="file-preview">
                    <img id="previewImage" src="" alt="预览图片" style="display: none;">
                </div>
            </div>

            <!-- 加载动画 -->
            <div id="loading">
                <img src="static/loading.gif" alt="Loading...">
                <p>正在处理...</p>
            </div>

            <!-- 结果展示区域 -->
            <div id="results">
                <h3 class="text-center">分类结果：</h3>
                <!-- Swiper 容器 -->
                <div class="swiper-container">
                    <div class="swiper-wrapper" id="result-list"></div>
                    <!-- 分页器 -->
                    <div class="swiper-pagination"></div>
                    <!-- 导航按钮 -->
                    <div class="swiper-button-next"></div>
                    <div class="swiper-button-prev"></div>
                </div>
            </div>

            <!-- 查看历史记录按钮 -->
            <div class="text-center mt-5">
                <a href="/history" class="btn btn-primary">
                    <i class="fas fa-history"></i> 查看全部历史记录
                </a>
            </div>
        </div>
    </div>

    <!-- 引入Bootstrap 5 JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/js/bootstrap.bundle.min.js"></script>
    <!-- 引入Swiper JS -->
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script>
        // 监听文件上传输入框的变化事件
        document.getElementById('fileInput').addEventListener('change', function(e) {
            const files = e.target.files;
            const formData = new FormData();

            for (let i = 0; i < files.length; i++) {
                formData.append('files[]', files[i]);
            }

            document.getElementById('loading').style.display = 'block';
            document.getElementById('results').style.display = 'none';

            fetch('/predict', {
                method: 'POST',
                body: formData
            })
            .then(response => response.json())
            .then(data => {
                const resultContainer = document.getElementById('result-list');
                resultContainer.innerHTML = '';

                data.forEach((item, index) => {
                    const file = files[index];
                    const reader = new FileReader();
                    reader.onload = function(e) {
                        // 创建 Swiper 幻灯片
                        const slide = document.createElement('div');
                        slide.className = 'swiper-slide';

                        // 创建图片元素
                        const preview = document.createElement('img');
                        preview.src = e.target.result;
                        preview.className = 'preview';
                        slide.appendChild(preview);

                        // 创建类别信息
                        const className = document.createElement('p');
                        const classLink = document.createElement('a');
                        classLink.href = `https://www.baidu.com/s?wd=${encodeURIComponent(item.class)}`;
                        classLink.className = 'class-link';
                        classLink.target = '_blank';

                        // 根据类别添加相应的图标
                        let iconClass = '';
                        switch (item.class) {
                            case '飞机':
                                iconClass = 'fas fa-plane';
                                break;
                            case '汽车':
                                iconClass = 'fas fa-car';
                                break;
                            case '鸟':
                                iconClass = 'fas fa-dove';
                                break;
                            case '猫':
                                iconClass = 'fas fa-cat';
                                break;
                            case '鹿':
                                iconClass = 'fas fa-deer';
                                break;
                            case '狗':
                                iconClass = 'fas fa-dog';
                                break;
                            case '青蛙':
                                iconClass = 'fas fa-frog';
                                break;
                            case '马':
                                iconClass = 'fas fa-horse';
                                break;
                            case '船':
                                iconClass = 'fas fa-ship';
                                break;
                            case '卡车':
                                iconClass = 'fas fa-truck';
                                break;
                            default:
                                iconClass = 'fas fa-question-circle';
                        }

                        const icon = document.createElement('i');
                        icon.className = iconClass;
                        classLink.appendChild(icon);

                        const textNode = document.createTextNode(` ${item.class}`);
                        classLink.appendChild(textNode);

                        className.appendChild(classLink);
                        slide.appendChild(className);

                        // 创建置信度信息
                        const confidence = document.createElement('p');
                        confidence.className = 'confidence-text';
                        const confidenceText = `置信度：${item.confidence}%`;
                        confidence.textContent = confidenceText;

                        slide.appendChild(confidence);

                        // 创建Tooltip
                        const tooltip = document.createElement('div');
                        tooltip.className = 'tooltip';
                        tooltip.textContent = confidenceText;
                        slide.appendChild(tooltip);

                        // 创建置信度光柱容器
                        const barContainer = document.createElement('div');
                        barContainer.className = 'confidence-bar-container';

                        // 创建置信度光柱
                        const bar = document.createElement('div');
                        bar.className = 'confidence-bar';
                        bar.style.setProperty('--bar-width', `${item.confidence}%`);
                        bar.style.animationDelay = '0.5s';

                        barContainer.appendChild(bar);
                        slide.appendChild(barContainer);

                        // 将幻灯片添加到 Swiper 容器
                        resultContainer.appendChild(slide);
                    };
                    if (file) {
                        reader.readAsDataURL(file);
                    }
                });

                // 初始化 Swiper
                const swiper = new Swiper('.swiper-container', {
                    loop: true,
                    pagination: {
                        el: '.swiper-pagination',
                        clickable: true,
                    },
                    navigation: {
                        nextEl: '.swiper-button-next',
                        prevEl: '.swiper-button-prev',
                    },
                });

                document.getElementById('loading').style.display = 'none';
                document.getElementById('results').style.display = 'block';
            })
            .catch(error => {
                console.error('Error:', error);
                document.getElementById('loading').style.display = 'none';
                alert('发生错误，请重试。');
            });
        });

        // 折叠按钮点击事件
        document.getElementById('collapseBtn').addEventListener('click', function() {
            const sidebar = document.getElementById('sidebar');
            const content = document.getElementById('content');
            const collapseIcon = document.querySelector('#collapseBtn i');

            if (sidebar.classList.contains('collapsed')) {
                sidebar.classList.remove('collapsed');
                content.classList.remove('shifted');
                collapseIcon.style.transform = 'rotate(0deg)';
                collapseIcon.className = 'fas fa-angle-double-left';
            } else {
                sidebar.classList.add('collapsed');
                content.classList.add('shifted');
                collapseIcon.style.transform = 'rotate(180deg)';
                collapseIcon.className = 'fas fa-angle-double-right';
            }
        });

        // 为每个菜单项添加动画延迟
        document.addEventListener('DOMContentLoaded', function() {
            const menuItems = document.querySelectorAll('.sidebar ul li a');
            menuItems.forEach((item, index) => {
                item.style.animationDelay = `${index * 0.1}s`;
            });
        });

        // 添加鼠标跟随流光效果
        document.addEventListener('DOMContentLoaded', function() {
            const buttons = document.querySelectorAll('.btn-primary, .btn-danger, .custom-file-upload');
            
            buttons.forEach(button => {
                // 创建光圈元素
                const glow = document.createElement('span');
                glow.className = 'btn-glow';
                button.appendChild(glow);
                
                // 鼠标移动事件
                button.addEventListener('mousemove', function(e) {
                    const rect = this.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    // 更新光圈位置
                    glow.style.left = `${x}px`;
                    glow.style.top = `${y}px`;
                });
                
                // 鼠标离开时隐藏光圈
                button.addEventListener('mouseleave', function() {
                    glow.style.opacity = '0';
                    glow.style.transform = 'translate(-50%, -50%) scale(0)';
                });
                
                // 鼠标进入时显示光圈
                button.addEventListener('mouseenter', function(e) {
                    const rect = this.getBoundingClientRect();
                    const x = e.clientX - rect.left;
                    const y = e.clientY - rect.top;
                    
                    glow.style.left = `${x}px`;
                    glow.style.top = `${y}px`;
                    glow.style.opacity = '0.6';
                    glow.style.transform = 'translate(-50%, -50%) scale(1)';
                });
            });

            // 主题切换功能
            const themeToggleBtn = document.getElementById('themeToggleBtn');
            
            // 初始化主题
            const userThemePreference = localStorage.getItem('theme');
            if (userThemePreference === 'dark') {
                document.documentElement.setAttribute('data-theme', 'dark');
            } else if (userThemePreference === 'light') {
                document.documentElement.removeAttribute('data-theme');
            } else {
                // 默认使用系统的主题设置
                if (window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches) {
                    document.documentElement.setAttribute('data-theme', 'dark');
                }
            }

            // 主题切换按钮点击事件
            themeToggleBtn.addEventListener('click', () => {
                const isDarkMode = document.documentElement.getAttribute('data-theme') === 'dark';
                if (isDarkMode) {
                    document.documentElement.removeAttribute('data-theme');
                    localStorage.setItem('theme', 'light');
                } else {
                    document.documentElement.setAttribute('data-theme', 'dark');
                    localStorage.setItem('theme', 'dark');
                }
            });

            // 监听系统主题变化
            window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', e => {
                if (localStorage.getItem('theme') === null) {
                    if (e.matches) {
                        document.documentElement.setAttribute('data-theme', 'dark');
                    } else {
                        document.documentElement.removeAttribute('data-theme');
                    }
                }
            });
        });
    </script>
</body>
</html>


